<template>
	<div>
		<el-tree 
		ref="lxltree"
		show-checkbox
		default-expand-all
		node-key="id"
		:default-checked-keys="values"
		:props="props"
		:data="resourceList">
		</el-tree>
		<el-button
		style="margin-top: 20px;"
		type="primary"
		plain
		@click="save"
		>保存
		</el-button>
	</div>
</template>

<script>
import { get, post } from '@/plugins/axios'
export default {
	name: 'RoleResource',
	created () {
		this.roleId = this.$route.query.roleId
		this.getData()
	},
	data () {
		const module = '/umsRoleResource'
		return {
			url: {
				getData: module + '/getData',
				save: module + '/save'
			},
			resourceList: [],
			roleId: null,
			props: {
				label: 'name',
				children: 'children'
			},
			values: []
		}
	},
	methods: {
		getData() {
			get(this.url.getData, { roleId: this.roleId }, response => {
				this.resourceList = response.resource
				for(const index in response.values){
					if(!response.values[index].type){
						this.values.push(response.values[index].resourceId)
					}
				}
			})
		},
		save(){
			const checkAll = this.$refs.lxltree.getCheckedNodes(false,true)
			const menus = []
			const btns = []
			for(const index in checkAll){
				if(checkAll[index].type){
					menus.push(checkAll[index].id)
				} else {
					btns.push(checkAll[index].id)
				}
			}
			post(this.url.save, { roleId: this.roleId, menus: menus, btns: btns }, response => {
				this.$router.push("/role")
			})
			console.log(checkAll)
		}
	}
}
</script>

<style>
</style>
